<template>
    <mu-list textline="two-line">
      <mu-sub-header>{{title}}</mu-sub-header>
      <mu-list-item
        v-for="song in list"
        :key="song.id"
        :ripple="true"
        button
        @click="listClick(song)"
      >
        <!-- 信息 -->
        <mu-list-item-content>
          <mu-list-item-title>{{song.name}}</mu-list-item-title>
          <mu-list-item-sub-title>
             {{song.artist}}
          </mu-list-item-sub-title>
        </mu-list-item-content>
        <!-- 更多 -->
        <mu-list-item-action>
            <slot name="right" />
        </mu-list-item-action>
      </mu-list-item>
    </mu-list>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
    props: {
        title: {
            type: String,
            defalut: ''
        },
        list: {
            type: Array,
            defalut: () => []
        }
    },
    setup(_, ctx) { // prop, ctx
        function listClick(val: any) {
            ctx.emit('optSong', val)
        }
        return {
            listClick
        }
    }
})
</script>

<style>

</style>